<template>
		<view class="y">
	<view class="y">
		<view style="padding: 6px 16px;margin-top: 4px; background-color: #ffaa7f;">
			<label class="x"
				style="background-color: #e0e0e0; border-radius: 40px; height: 30px; align-items: center;">
				<image src="../../static/搜索.png" style="width: 20px; height: 16px; margin-left: 16px;"></image>
				<input type="text" placeholder="请输入商品" style="margin-left: 16px;" />
			</label>
		</view>
			<!-- 轮播图 -->
		<swiper :autoplay="1">
			<view class="lun">
		<view v-for="(item,index) in lunbo" :key="index">
		<swiper-item>
			<image :src="item.url" class="lun1"></image>
		</swiper-item>
	</view>
	</view>
	</swiper>
	<view style="background-color:  #e3e3e3; height: 10rpx;"></view>
	<!-- 居家 -->
	<view class="x" style="margin: 5rpx; display: flex;flex-wrap: wrap;justify-content:flex-start" @click="dianji">
		<view v-for="(item,index) in menu" :key="index">
				<image :src="item.iconUrl" style="width: 80rpx;height: 80rpx;padding-left:55rpx;">
				</image>
			<view style="padding-left:55rpx;">{{item.name}}</view>
		</view>
	</view>
	
	<view style="background-color: #e3e3e3; height: 50rpx;"></view>

	<!-- 优惠券 -->
	<view class="x" style="width: 750rpx;display: flex; flex-wrap: wrap;" @click="dianji">
		<view style="font-size: 35rpx; margin-left: 50rpx; margin-top: 15rpx;
			display: flex;justify-content: center;margin-right: 400rpx;">优惠券</view>
		<view v-for="(item,index) in youhuiquan" :key="index">
			<view class="kuang">
				<view class="heng">
					<view class="qian">
						￥<p style="font-size: 55rpx;color: red;">{{item. discount}}元</p>
					</view>
					<view style="margin-top: 15rpx;">{{item.name}}</view><!-- 限时满减券 -->
				</view>
				<view class="zhui">{{item.desc}}-{{item.tag}}有限期:10天</view>
			</view>
		</view>
	</view>

	<view style="background-color: #e3e3e3; height: 50rpx;"></view>
	
	<!-- 团员购 -->
	<view class="x" @click="dianji">
		<view style="width: 750rpx;margin-top: 15rpx;">
			<view class="tuan">团购专区<p style="font-size: 20rpx;color: #a2a2a2;">更多团购商品></p>
			</view>
			<view v-for="(item,index) in tuan" :key="index">
				<view class="tuangou">
					<!-- 图片 -->
					<view @click="AAA(item.id)">
					<image :src="item.picUrl" class="tuan2" ></image>
					</view>
					<view class="tuan3">
						<view style="font-size: 25rpx;">{{item.name}}</view>
						<view style="font-size: 20rpx; color: #b8b8b8;">{{item.brief}}</view>
						<view class="tuan4">
							<view class="tuan5">{{item.grouponMember}}人成团</view>
							<view class="tuan6">{{item.grouponDiscount}}元再减</view>
						</view>
						<view class="tuan7">
							<view class="tuan8">￥{{item.grouponPrice}}</view>
							<view class="tuan9">￥{{item.retailPrice}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view style="background-color: #e3e3e3; height: 50rpx;"></view>

	<!-- 品牌商 -->
	<view style="width: 750rpx;margin-top: 15rpx;" class="x" @click="dianji">
		<view class="y">
			<view class="tuan">品牌商直供<p style="font-size: 20rpx;color: #a2a2a2;">更多品牌商></p>
			</view>
			<view style="display: flex;flex-direction: row;" class="pinpai">
				<view v-for="(item,index) in shang" :key="index">
					<image :src="item.picUrl" class="pinpai1"></image>
					<view class="pinpai2">{{item.name}}</view>
					<!-- <view>{{item.desc}}</view> -->
				</view>
			</view>
		</view>
	</view>
	</view>
	
	<view style="background-color: #e3e3e3; height: 50rpx;"></view>

	<!-- 新品 -->
	<view style="width: 750rpx;margin-top: 15rpx;" class="x" @click="dianji">
		<view class="y">
			<view class="tuan">新品首发<p style="font-size: 20rpx;color: #a2a2a2;">更多新品首发></p>
			</view>
			<view style="display: flex;flex-direction: row;" class="xinpin">
				<view v-for="(item,index) in xinpin" :key="index">
					<image :src="item.picUrl" class="xinpin1"></image>
					<view class="xinpin3">{{item.name}}</view>
					<view class="xinpin2"> ￥{{item.retailPrice}}</view>
				</view>
			</view>
		</view>
	</view>
	
	<view style="background-color: #e3e3e3; height: 50rpx;"></view>

	<!-- 人气推荐 -->
	<view class="x" @click="dianji">
		<view style="width: 750rpx;margin-top: 15rpx;">
			<view class="tuan">人气推荐<p style="font-size: 20rpx;color: #a2a2a2;">更多人气推荐></p>
			</view>
			<view v-for="(item,index) in renqi" :key="index" class="x" style="align-items: center; ">
				<image :src="item.picUrl" style="width: 250rpx; height: 250rpx;padding-left: 30rpx;"></image>
				<view class="tuan3">
					<view style="font-size: 25rpx;">{{item.name}}</view>
					<view style="font-size: 18rpx; color: #a2a2a2;margin-top: 10rpx;">{{item.brief}}</view>
					<view class="tuan7">
						<view class="tuan8" style="margin-top: 40rpx;">￥{{item.retailPrice}}</view>
						<view class="tuan9" style="margin-top: 60rpx;">￥{{item.counterPrice}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view style="background-color: #e3e3e3; height: 50rpx;"></view>

	<!-- 专题精选 -->
	<view style="width: 750rpx;margin-top: 15rpx;" class="x" @click="dianji">
		<view class="y">
			<view class="tuan">专题精选<p style="font-size: 20rpx;color: #a2a2a2;">更多专题精选></p>
			</view>
			<view style="display: flex;flex-direction: row;" class="zhuanti">
				<view v-for="(item,index) in zhuanti" :key="index">
					<image :src="item.picUrl" class="zhuanti1"></image>
					<view>{{item.title}}</view>
					<view> {{item.subtitle}}</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lunbo: [],
				menu: [], //给一个空数组，用来装等下获取的接口数据
				youhuiquan: [], //优惠券的数组
				tuan: [], //多人团购
				shang: [], //品牌商
				xinpin: [],
				renqi: [],
				zhuanti: [],

			}
		},
		// 刷新方法
		onLoad() {
			uni.request({
				url: 'http://47.91.230.137:8086/wx/home/index', //全部数据的接口
				success: (res) => {
					// debugger
					//data.后面是你要拿的数据
					this.lunbo = res.data.data.banner,
						this.menu = res.data.data.channel,
						this.youhuiquan = res.data.data.couponList,
						this.tuan = res.data.data.grouponList,
						this.shang = res.data.data.brandList,
						this.xinpin = res.data.data.newGoodsList,
						this.renqi = res.data.data.hotGoodsList,
						this.zhuanti = res.data.data.topicList
					// 打印一下看看有没有拿到数据
					// console.log(this.menu)

				}
			})
		},
		methods: {
			dianji(){
				uni.navigateTo({
					url:'/pages/denglu/denglu'
				})
			},
			AAA(id){
				uni.navigateTo({
					url:'/pages/jingxuan/jingxuan(1)?id='+id
					// url:'/pages/jingxuanBack/jingxuanBack'
				})
			}
		}
	}
</script>

<style>
	.x {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: row;
		/* 横 */

	}

	.y {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: column;
		/* 竖 */
	}

	/* 轮播图 */
	.lun {
		width: 750rpx;
	}

	.lun1 {
		width: 750rpx;
		height: 300rpx;
	}

	/* 优惠券 */
	.kuang {
		margin-left: 50rpx;
		margin-top: 20rpx;
		width: 650rpx;
		height: 200rpx;
		border: solid;
		/* 设置边框 */
		border-width: 1rpx;
		/* 边框宽度 */
		border-color: red;
		/* 边框颜色 */
	}

	.heng {
		display: flex;
		justify-content: space-around;
		padding-top: 35rpx;
	}

	.qian {
		color: red;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		/* margin: 45rpx 0 0 15rpx; */
	}

	.zhui {
		margin-left: 90rpx;
		margin-top: 10rpx;
		color: #a2a2a2;
		font-size: 30rpx;
	}

	/* 团购 */
	.tuan {
		margin: 10rpx 15rpx 15rpx 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tuangou {
		display: flex;
		justify-content: flex-start;
		padding-top: 40rpx;
		padding-left: 50rpx;
		margin: 0 auto;
		background-color: aliceblue;
		align-items: center;
	}

	.tuan2 {
		width: 250rpx;
		height: 250rpx;
	}

	.tuan3 {
		padding-left: 40rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.tuan4 {
		display: flex;
		flex-direction: row;
	}

	.tuan5 {
		font-size: 20rpx;
		border: solid;
		/* 设置边框 */
		border-width: 1rpx;
		/* 边框宽度 */
		color: #55aaff;
	}

	.tuan6 {
		font-size: 20rpx;
		margin-left: 10rpx;
		border: solid;
		/* 设置边框 */
		border-width: 1rpx;
		/* 边框宽度 */
		color: red;
	}

	.tuan7 {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
	}

	.tuan8 {}

	.tuan9 {
		margin-left: 25rpx;
		margin-top: 23rpx;
		font-size: 15rpx;
		color: #c9c9c9;
		text-decoration: line-through;
	}

	/* 新品区 */
	.xinpin {
		height: 1200rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.xinpin1 {
		width: 300rpx;
		height: 300rpx;
	}
	.xinpin2{
		font-size: 25rpx;
		color: #ceb038;
		display: flex;
		justify-content: center;
	}
	.xinpin3{
		font-size: 25rpx;
		color: #a2a2a2;
		display: flex;
		justify-content: center;
	}

	/* 专题 */
	.zhuanti {
		height: 1200rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.zhuanti1 {
		width: 300rpx;
		height: 300rpx;
	}

	/* 品牌商 */
	.pinpai {
		margin-top: 20rpx;
		height: 700rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.pinpai1 {
		
		width: 300rpx;
		height: 200rpx;
	}
	.pinpai2{
		display: flex;
		justify-content: center;
	}
</style>
